<template>
  <div class="item_container" @click="addTab">
        <div class="item_inco">
            <img :src="index === status? item.icon_active : item.icon" alt="">
        </div>

        <div :class="index === status ?'item_color' :'item_color_active'">
            <p>{{item.title}}</p>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    props:{
        item:{
            type:Object
        },

        index:{
            type:Number
        },
        status:{
            type:Number
        }
    },

    methods:{
        addTab(){
            this.$emit('change',this.index)
        }
    }
}
</script>

<style scoped>
.item_container {
    width: 25%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.item_inco {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.item_color {
    color: red;
}

.item_color_active{
    color: black;
}

</style>